<template>
	<view>
		<view class="selct-box">
			<view class="selct">
				<text class="mr-10" @click="selctBol.none = true">{{modelObj.none}}</text><u-icon name="arrow-down-fill"
					size="15" color="#999" @click="selctBol.none = true"></u-icon>
				<u-picker v-model="selctBol.none" mode="time" :params="params" @confirm="affirmPicker"></u-picker>
			</view>
			<view class="selct">
				<text class="mr-10" @click="selctBol.two = true">消费门店</text><u-icon name="arrow-down-fill" size="15" color="#999"
					@click="selctBol.two = true"></u-icon>
				<u-popup v-model="selctBol.two" mode="bottom" height="600rpx">
					<view class="popup-top">
						<text @click="selctBol.two = false" style="color:#2979ff">取消</text>
						<text @click="selctBol.two = false" style="color:#119c2e">确定</text>
					</view>
					<!-- <u-button type="primary">全部</u-button> -->
				</u-popup>
			</view>
			<view class="selct">
				<text class="mr-10" @click="selctBol.three = true">类型：<text style="color:#2979ff">{{modelObj.three}}</text></text><u-icon name="arrow-down-fill"
					size="15" color="#999" @click="selctBol.three = true"></u-icon>
				<u-select v-model="selctBol.three" :list="list" @confirm="selctConfirm($event)"></u-select>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						value: 0,
						label: '积分'
					},
					{
						value: 1,
						label: '余额'
					}
				],
				modelObj: {
					none: '2023-05',
					two: '',
					three: '积分'
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				selctBol: {
					none: false,
					two: false,
					three: false
				}
			}
		},
		methods: {
			affirmPicker(e) {
				this.modelObj.none = e.year + '-' + e.month
			},
			selctConfirm(e) {
				this.modelObj.three = e[0].label
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-icon{
		vertical-align: middle;
	}
	.popup-top {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
	}

	.selct-box {
		display: flex;
		padding: 0 20rpx;
		margin: 30rpx 0;

		.selct {
			flex: 1;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>